<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>命令模式</title>
</head>
<body>
<button class="add">添加</button>
<button class="refresh">刷新</button>
</body>
</html>

<script>
  /*
  * 松耦合的方式设计程序
  * */

  function bindF (target, func) {
    document.querySelector(target).onclick = function () {
      func()
    }
  }

  const addObj = {
    add: function () {
      console.log('add:', 'add')
    }
  }

  const refreshObj = {
    refresh: function () {
      console.log('refresh:', 'refresh')
    }
  }

  function addF (receiver) {
    return receiver.add
  }

  function refreshF (receiver) {
    return receiver.refresh
  }

  const add = addF(addObj)
  const refresh = refreshF(refreshObj)
  bindF('.add', add)
  bindF('.refresh', refresh)

  // 宏命令
  function f1 () {
    console.log('f1:', 'f1')
  }
  function f2 () {
    console.log('f2:', 'f2')
  }
  function f3 () {
    console.log('f3:', 'f3')
  }
  
  function q () {
    let list = []
    return {
      add: function (f) {
        list.push(f)
      },
      start: function () {
        list.forEach(e => {
          e()
        })
      }
    }
  }

  const w = q()
  w.add(f1)
  w.add(f2)
  w.add(f3)
  w.start()



</script>